<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title>2017-09-02</title>
</head>
<body>
    <iframe src="navigation.html" frameborder="no" style=" width: 330px; height: 50px; "></iframe>

    <main>
        <article>
            <h2>多列的实现</h2>
            <dl>
                <dt>通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！</dt>
                <dd>在本章中，您将学习如下多列属性：<ul><li><code>column-count</code></li><li><code>column-gap</code></li><li><code>column-rule</code></li></ul></dd>
                <dd><xmp><style> 
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
</style></xmp></dd>
                <dt>效果</dt>
                <dd><iframe src="http://www.w3school.com.cn/tiy/loadtext.asp?f=css3_column-rule" frameborder="no" style=" width: 500px; height: 200px; "></iframe></dd>
            </dl>
        </article>
    </main>

    <footer>
        <address>
            <p>Written by <bdi>Qi Lin</bdi>.</p>
            <p>完成时间：<time datetime="2017-09-12">2017年09月12日</time></p>
        </address>
        <details>
            <summary>引用：w3school</summary>
            <blockquote>
                <cite>http://www.w3school.com.cn/css3/css3_multiple_columns.asp</cite>
            </blockquote>
        </details>
    </footer>

</body>
</html>